
<template>
    <header id='head_top'>
        <div class="head_goback">
            <!--<icon name="chevron-left" scale="1.5" style="margin-top:12px;"></icon>-->
    
            <div @click="leftClick" style="float:left;margin:0px;padding:0px;display:inline-block;width:20%;">
    
                <icon name="angle-left" scale="2" style="margin-top:5px;padding:0xp;margin-bottom:0px;margin-left:10px;"></icon>
    
            </div>
            <div :class="[smallTitle==true?'small-title':'title-style']" @click="titleClick">
                <span>{{headTitle}}</span> 
                <span  v-if="downStatus==true&&betMode"><img :src="downIcon" height="15" width="15" 
             style="vertical-align: -3px;"></span>        
                <span v-if="downStatus==false&&betMode"><img :src="upIcon" height="15" width="15" 
                    style="vertical-align: -3px;" ></span>        
 
            </div>

            <div class="right-button">

             <span v-if="betMode"><img src="../../assets/game/icon_assistant30x30@2x.png" height="15" width="15" 
             style="vertical-align: -3px;"></span>        
            <span>{{rightText}}</span>
            </div>
    
        </div>
        <!--<router-link :to="userInfo? '/profile':'/login'" v-if='signinUp' class="head_login">
                            <svg class="user_avatar" v-if="userInfo">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
                            </svg>
                            <span class="login_span" v-else>登录|注册</span>
                        </router-link>-->
    
    </header>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data() {
        return {
            downIcon:require("@/assets/game/icon_down_30x30@2x.png"),
            upIcon:require("@/assets/game/icon_up_30x30@2x.png"),
            downStatus:true

        }
    },
    mounted() {
        //获取用户信息
        console.log("downStatus"+this.downStatus);

        console.log("betMode:"+this.betMode)

    },
    props: ['showRightIcon','betMode','rightText', 'headTitle', 'leftEvent', 'rightEvent', 'overRightEvent', 'smallTitle'],
    computed: {

        hasRightText(){
            if(this.rightText ||''==''){
                return false;
            }
            return true;


        }

        
    },
    methods: {
        ...mapActions([
        ]),


        setDownStatus(downStatus){


            this.downStatus = downStatus;



        },
        leftClick() {


            if (this.leftEvent != true) {
                this.$router.go(-1)
                return;
            }

            this.$emit('leftClick')

        },

        titleClick() {
            this.$emit('titleClick')
        },
        rightClick() {
            if (this.overRightEvent == '') {
                this.$router.replace("/")
                return;
            }

            this.$emit('rightClick')


        },

    }

}

</script>

<style lang="scss" scoped>
@import '../../style/cssvar.scss';

#head_top {
    background-color: rgb(222, 24, 39);
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    padding: 0px;
    height: 44px;
    width: 100%;
}

.head_goback {
    line-height: 44px;
    color: #fff;
    margin-left: 0px;
    padding: 0px;
    width: 100%;
    height: 44px;
}



.title-style {
    float: left;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    width: 60%;
    text-align: center;
    font-weight: 800;
    font-size: 18px;
}

.small-title {
    float: left;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    width: 50%;
    text-align: center;
    font-weight: 800;
    font-size: 18px;
}

.right-button{

    float: right;
    display: inline-block;
    font-size:14px;
    color:white;
    padding: 0px 10px 0px 10px;
    vertical-align: 1px;
}

.title_head {
    @include center;
    width: 50%;
    color: #fff;
    text-align: center;
    .title_text {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
    }
}
</style>
